<template>
  <fe-page title="流程详情" @back="goBack">
    <template #extra>
      <el-button-group>
        <el-button type="primary" plain @click="handleDownloadXml"><a ref="downloadLink">下载xml</a></el-button>
				<el-button type="primary" plain @click="handleDownloadSvg"><a ref="downloadSvg">下载svg</a></el-button>
				<el-button type="primary" plain @click="handlePerviewXML">预览</el-button>
      </el-button-group>
      <el-button type="primary" icon="Edit" @click="handleUpdate" v-hasPermi="['system:user:edit']">编辑</el-button>
		</template>
    <div class="bpmn-container">
      <div class="canvas" id="canvasView"></div>
    </div>
    <el-dialog title="xml预览" v-model="perviewXML.show" width="800px" append-to-body>
			<div class="pre-box">
				<el-button type="primary" link icon="DocumentCopy" v-copyText="perviewXML.xml" v-copyText:callback="copyTextSuccess" class="copy-btn">
					复制
				</el-button>
				<pre><code class="hljs" v-html="perviewXML.xml"></code></pre>
			</div>
		</el-dialog>
  </fe-page>
</template>

<script setup name="ProcessView">
import BpmnModeler from 'bpmn-js'
import hljs from 'highlight.js'
import "highlight.js/styles/atom-one-dark-reasonable.css"
import { getData } from "@/api/service/process"

const route = useRoute()
const { proxy } = getCurrentInstance()

const id = route.params && route.params.id
const loading = ref(true)
const form = ref({})
let bpmnModeler = null
const perviewXML = ref({
	show: false,
	xml: ''
})

function getInfo() {
	loading.value = true
	getData(id).then(response => {
		loading.value = false
		let result = response.result || ''
    form.value = result
    bpmnModeler.importXML(result).then(err => {
      proxy.$message.success('加载成功')
    })
  })
}

function init() {
	bpmnModeler = new BpmnModeler({
		container: '#canvasView'
	})
}

async function handleDownloadXml() {
	const downloadLink = proxy.$refs["downloadLink"]
	try {
    const { xml } = await bpmnModeler.saveXML({ format: true })
    setEncoded(downloadLink, 'diagram.xml', xml)
		proxy.$message.success('下载成功')
  } catch (error) {
    proxy.$modal.error('下载失败，请重试')
  }
}

async function handleDownloadSvg() {
	const downloadSvgLink = proxy.$refs["downloadSvg"]
	try {
    const { svg } = await bpmnModeler.saveSVG()
    setEncoded(downloadSvgLink, 'diagram.svg', svg)
		proxy.$message.success('下载成功')
  } catch (error) {
    proxy.$modal.error('下载失败，请重试')
  }
}

function setEncoded(link, name, data) {
  const encodedData = encodeURIComponent(data)
  if (data) {
    link.className += ('active')
    link.setAttribute('href', 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData)
    link.setAttribute('download', name)
  } else {
    link.className.replace('active', '')
  }
}

async function handlePerviewXML() {
	try {
    const { xml } = await bpmnModeler.saveXML({ format: true })
    perviewXML.value.show = true
		perviewXML.value.xml = hljs.highlightAuto(xml).value
  } catch (error) {
    proxy.$modal.error('预览失败，请重试')
  }
}

function copyTextSuccess() {
  proxy.$modal.msgSuccess("复制成功")
}

function handleUpdate() {
  const obj = { path: "/service/process-data/edit/" + id, query: { t: Date.now(), current: route.query.current }}
  proxy.$tab.closeOpenPage(obj)
}

function goBack() {
  const obj = { path: "/service/process",  query: { t: Date.now(), current: route.query.current }}
  proxy.$tab.closeOpenPage(obj)
}

onMounted(() => {
  init()
  getInfo()
})
</script>

<style lang="scss" scoped>
.bpmn-container{
	width:100%;
  height:100%;
	.canvas{
		width:100%;
    height: 100%;
    background: url('')
      repeat !important;
	}
}
.pre-box{
	position: relative;
	.copy-btn{
		position: absolute;
		top: 4px;
		right: 4px;
		z-index: 10;
	}
  .hljs{
    max-height: 700px;
  }
}
</style>